<template>
  <div class="g6_wrap">
    <div class="toolbox_wrap">
      <div class="title_wrap">
        <div class="title">工作流</div>
        <div class="icon"></div>
      </div>
      <div class="toolbox1">
        <div
          class="toolbox_item"
          @click="onG6HandleFn(item)"
          v-for="item in toolboxList"
          :key="item.id"
        >
          <span :class="item.icon"></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div :class="['toolbox2', currentG6Type !== 'edit' && 'watchClass']">
        <div v-for="item in addCanvasBoxList" :key="item.id">
          <div
            class="toolbox_item"
            :title="item.name"
            @click="addItemNodeFn(item)"
          >
            <img :src="item.icon" alt="" srcset="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="backbtn" @click="onBackFn">返回</div>
    </div>
    <div class="g6_main_wrapper">
      <div class="g6_tree">
        <div class="g6_tree_name">目录</div>
        <el-tree
          :data="g6TreeData"
          default-expand-all
          :props="g6TreeDefaultProps"
        ></el-tree>
      </div>
      <div class="g6_content">
        <div id="g6box"></div>
      </div>
      <div class="g6_file_wrap">
        <ysglRightTab />
      </div>
    </div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
import ysglRightTab from "./ysglRightTab.vue";
export default {
  components: {
    ysglRightTab,
  },
  props: {
    g6Data: {
      type: Object,
      default: () => {},
    },
    currentG6Type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      graph: null,
      toolboxList: [
        { id: 1, name: "导入", icon: "el-icon-platform-eleme" },
        { id: 2, name: "导出", icon: "el-icon-delete-solid" },
        { id: 3, name: "拖动", icon: "el-icon-s-tools" },
        { id: 4, name: "框选", icon: "el-icon-warning" },
        { id: 6, name: "发布", icon: "el-icon-question" },
      ],
      addCanvasBoxList: [
        {
          id: 1,
          name: "源",
          icon: require("@/assets/gzlgl/start.png"),
        },
        {
          id: 2,
          name: "目标",
          icon: require("@/assets/gzlgl/end.png"),
        },
        {
          id: 3,
          name: "开始",
          icon: require("@/assets/gzlgl/000.png"),
        },
        {
          id: 4,
          name: "筛选器",
          icon: require("@/assets/gzlgl/001.png"),
        },
        {
          id: 5,
          name: "汇总",
          icon: require("@/assets/gzlgl/002.png"),
        },
        {
          id: 6,
          name: "SQL",
          icon: require("@/assets/gzlgl/003.png"),
        },
        {
          id: 7,
          name: "JAVA",
          icon: require("@/assets/gzlgl/004.png"),
        },
        {
          id: 8,
          name: "IF",
          icon: require("@/assets/gzlgl/005.png"),
        },
        {
          id: 9,
          name: "JOIN",
          icon: require("@/assets/gzlgl/006.png"),
        },
        {
          id: 10,
          name: "存储过程",
          icon: require("@/assets/gzlgl/007.png"),
        },
        {
          id: 11,
          name: "数据流",
          icon: require("@/assets/gzlgl/008.png"),
        },
        {
          id: 12,
          name: "Script",
          icon: require("@/assets/gzlgl/009.png"),
        },
        {
          id: 13,
          name: "文件入库",
          icon: require("@/assets/gzlgl/010.png"),
        },
        {
          id: 14,
          name: "稽核",
          icon: require("@/assets/gzlgl/011.png"),
        },
        {
          id: 15,
          name: "Shell",
          icon: require("@/assets/gzlgl/012.png"),
        },
      ],
      g6TreeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
                {
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
      ],
      g6TreeDefaultProps: {
        children: "children",
        label: "label",
      },
      g6RuleForm: {
        isDailli: false,
        type: "",
        caozuo: "",
        lujing: "",
        canshu: "",
        beizhu: "",
      },
      g6Rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择脚本类型", trigger: "blur" }],
        desc: [{ required: true, message: "不允许为空", trigger: "blur" }],
      },
      firstNodeItem: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initNewG6Fn();
    });
  },
  methods: {
    // g6初始化并挂载方法
    initNewG6Fn() {
      // 自定义连线
      G6.registerBehavior("click-add-edge", {
        // 设定该自定义行为需要监听的事件及其响应函数
        getEvents() {
          return {
            "node:click": "onClick",
            mousemove: "onMousemove",
            "edge:click": "onEdgeClick",
          };
        },
        onClick(ev) {
          const node = ev.item;
          if (!this.firstNodeItem) {
            this.firstNodeItem = ev.item._cfg.id;
          }
          // 鼠标当前点击的节点的位置
          const point = { x: ev.x, y: ev.y };
          const model = node.getModel();
          if (this.addingEdge && this.edge) {
            if (this.firstNodeItem != node._cfg.id) {
              this.graph.updateItem(this.edge, {
                target: model.id,
              });
            } else {
              this.graph.removeItem(this.edge);
            }
            this.firstNodeItem = null;
            this.edge = null;
            this.addingEdge = false;
          } else {
            // 在图上新增一条边，结束点是鼠标当前点击的节点的位置
            this.edge = this.graph.addItem("edge", {
              source: model.id,
              target: point,
            });
            this.addingEdge = true;
          }
        },
        onMousemove(ev) {
          // 鼠标的当前位置
          const point = { x: ev.x, y: ev.y };
          if (this.addingEdge && this.edge) {
            // 更新边的结束点位置为当前鼠标位置
            this.graph.updateItem(this.edge, {
              target: point,
            });
          }
        },
        onEdgeClick(ev) {
          const currentEdge = ev.item;
          this.firstNodeItem = null;
          // 拖拽过程中，点击会点击到新增的边上
          if (this.addingEdge && this.edge == currentEdge) {
            this.graph.removeItem(this.edge);
            this.edge = null;
            this.addingEdge = false;
          }
        },
      });
      const width = document.getElementById("g6box").clientWidth;
      const height = document.getElementById("g6box").offsetHeight;
      let typeMode = [];
      if (this.currentG6Type === "watch") {
        typeMode = ["drag-canvas", "zoom-canvas"];
      } else if (this.currentG6Type === "edit") {
        typeMode = [
          "drag-node",
          "click-add-edge",
          { type: "brush-select", includeEdges: false },
        ];
      }
      console.log(typeMode);
      this.graph = new G6.Graph({
        container: "g6box",
        width,
        height,
        modes: {
          // 允许拖拽画布、缩放画布、拖拽节点、选中节点、新增连线
          default: typeMode,
        },
        layout: {
          type: "dagre",
          rankdir: "LR", // 可选，默认为图的中心
          align: "DL", // 可选
          nodesep: 20, // 可选
          ranksep: 50, // 可选
          controlPoints: true, // 可选
        },
        defaultNode: {
          type: "image",
          size: 50,
          labelCfg: {
            position: "bottom",
            offset: 8,
            style: {
              fill: "#0089F4",
              fontSize: 12,
            },
          },
        },
        defaultEdge: {
          style: {
            stroke: "#0083fc",
            lineWidth: 0.8,
            endArrow: {
              path: G6.Arrow.triangle(),
              fill: "#0089F4",
            },
          },
        },
      });
      this.graph.data(this.g6Data);
      this.graph.render();
    },
    // 添加相对应的元素
    addItemNodeFn(item) {
      if (this.currentG6Type !== "edit") {
        this.$message({
          message: "当前状态不可编辑~",
          type: "warning",
        });
        return;
      }
      let id = "node" + Math.random();
      let label = item.name;
      let img = item.icon;
      this.graph.addItem("node", {
        id,
        label,
        img,
      });
      this.graph.layout();
    },
    // 返回
    onBackFn() {
      this.$emit("isShowG6DialogFn", false);
    },
    onG6HandleFn(item) {
      if (item.name === "导出") {
        this.onSaveCanvasToPicFn();
      } else if (item.name === "导入") {
        this.onImportData();
      } else if (item.name === "发布") {
        this.onReleaseFn();
      }
    },
    // 导入数据
    onImportData() {
      const loading = this.$loading({
        lock: true,
        text: "导入数据中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
        this.$message({
          message: "导入成功~",
          type: "success",
        });
        let itemArr = [
          {
            id: 1,
            name: "导入数据001",
            icon: require("../../../../assets/logo.png"),
          },
          {
            id: 2,
            name: "导入数据002",
            icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=1a1fd69f756aed9a3b1bf6c23eaeb112",
          },
          {
            id: 3,
            name: "导入数据003",
            icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F0F420110430%2F200F4110430-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648007152&t=2239a831ef5bd42b2c358921403b80bf",
          },
        ];
        itemArr.forEach((item) => {
          this.addItemNodeFn(item);
        });
      }, 3000);
    },
    // 导出图片
    onSaveCanvasToPicFn() {
      this.graph.downloadFullImage("g6图片", "image/jpeg", {
        backgroundColor: "#fff",
      });
    },
    // 发布
    onReleaseFn() {
      const loading = this.$loading({
        lock: true,
        text: "发布中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
        this.$message({
          message: "发布成功~",
          type: "success",
        });
        this.onBackFn();
      }, 3000);
    },
    // 切换模式
    isChangeModeFn(type) {
      if (type === "watch") {
        this.graph.setMode();
      } else if (type === "edit") {
        this.graph.setMode("edit");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.g6_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .toolbox_wrap {
    width: 100%;
    height: 60px;
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #ccc;
    .title_wrap {
      display: flex;
      align-items: center;
      .title {
        font-size: 18px;
        color: #000;
      }
      .icon {
        width: 20px;
        height: 20px;
        background-color: #f00;
        margin-left: 12px;
      }
    }
    .toolbox1 {
      display: flex;
      align-items: center;
      margin-left: 50px;
      .toolbox_item {
        display: flex;
        font-size: 18px;
        flex-direction: column;
        align-items: center;
        margin-left: 10px;
        cursor: pointer;
        &:nth-child(3),
        &:nth-child(4) {
          color: #aaa;
          cursor: default;
        }
      }
    }
    .toolbox2 {
      display: flex;
      align-items: center;
      margin-left: 50px;
      &.watchClass {
        .toolbox_item {
          -webkit-filter: grayscale(1); /* Webkit */
          filter: gray; /* IE6-9 */
          filter: grayscale(1); /* W3C */
          cursor: not-allowed;
        }
      }
      .toolbox_item {
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        margin-left: 20px;
      }
    }
    .backbtn {
      position: absolute;
      top: 50%;
      font-size: 20px;
      transform: translateY(-50%);
      right: 20px;
      cursor: pointer;
    }
  }
  .g6_main_wrapper {
    width: 100%;
    height: 940px;
    display: flex;
    .g6_tree {
      flex: 0 0 200px;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
    .g6_content {
      flex: 1 1 100%;
      height: 100%;
      box-sizing: border-box;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      #g6box {
        width: 100%;
        height: 100%;
      }
    }
    .g6_file_wrap {
      flex: 0 0 600px;
      box-sizing: border-box;
      padding: 20px 40px;
      height: 100%;
    }
  }
}
</style>
